<template>
	<view :class="themeStyle">
		<view class="article-tops">
			<image class="fx_adv" :src="$util.img(pintuan_adv_image)" mode="widthFix"></image>
		</view>
		
		<view class="article-top">
			<view class="article-search">
				<input placeholder-class="placeholder-color" placeholder="商品搜索" v-model="search_text" @input="search()" @confirm="search()" />
				<text class="iconfont iconIcon_search" style="font-size: 50rpx;" @click="search"></text>
			</view>
		</view>

		<mescroll-uni ref="mescroll" @getData="getData" :top="500">
			<block slot="list">
				<block v-if="list.length">
					<view class="wpdepintuan" v-for="(item, index) in list" :key="index">
						<view class="wpdepintuan_hder">
							<view class="wpdepintuan_bao"><image :src="$util.img(item.sku_image.split(',')[0])" mode="" class="wpdepintuan_img"></image></view>
							<view class="wpdepintuan_zi">{{ item.pintuan_name }}</view>
							<view class="wpdepintuan_sj">
								<text>距结束 {{ item.timeShow }}</text>
							</view>
							<view class="wodesss_list_qian">
								¥
								<text class="price">{{ item.price }}</text>
							</view>
							<text class="wodesss_list_img_w" src="" mode=""></text>
							<button v-if="!item.timeShow " disabled=true  type="default"  @click="biddingDetail(item)">已结束</button>
							<button v-else-if="item.enter_id != 0" type="default" @click="enterDetail(item)">已竞标</button>
							<button v-else type="default" @click="biddingDetail(item)">去竞标</button>
						</view>
					</view>
				</block>
				<block v-else><ns-empty text="暂无数据" :hei="45" :isIndex="!1"></ns-empty></block>
			</block>
		</mescroll-uni>
		<ns-login ref="login"></ns-login>
		<text style="display: none;">{{ num }}</text>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import nsEmpty from '@/components/ns-empty/ns-empty-new';
export default {
	components: {
		nsEmpty,
	},
	data() {
		return {
			list: [],
			search_text: '',
			Math: '',
			timeOutObj: null,
			num:0,
			keywords:'',
			token: '',
			pintuanTraderDetail: null,//拼团商详情
			emptyBtn1: {
				text: "去登录",
				url: '/pages/login/login/login'
			},
			pintuan_adv_image: '',
		};
	},
	onShow() {
		// 刷新多语言
		this.token = uni.getStorageSync('token');
		
		this.$langConfig.refresh();
		this.get_pintuantrader_detail();
		this.get_adv_img();
	},
	computed:{
		themeStyle() {
			return 'theme-' + this.$store.state.themeStyle
		}
	},
	mounted() {
		if(!this.token) {
			this.$util.showToast({
				title:'当前未登录,请去登录'
			});
			this.$refs.login.open('/promotionpages/platformpintuan/bidding_list/bidding_list');
		}
	},
	methods: {
		get_adv_img() {
			this.$api.sendRequest({
				url : '/api/adv/detail',
				data: {
					keyword: 'WAP_PINTUAN_ADV',
				},
				success: res => {
					if(res.code >= 0 && res.data){
						this.pintuan_adv_image = res.data.adv_list[0].adv_image;
					}else {
						this.$util.showToast({
							title: res
						})
					}
				},
				fail: err=>{
					this.$util.showToast({
						title: err
					})
				}
			})
		},
		get_pintuantrader_detail() {
			this.$api.sendRequest({
				url : '/platformpintuan/api/Pintuantrader/detail',
				data: {},
				success: res => {
					if(res.code >= 0){
						this.pintuanTraderDetail = res.data;
					}
				},
				fail: err=>{
					
				}
			})
		},
		getData(mescroll) {
		
			this.$api.sendRequest({
			url: '/platformpintuan/api/pintuanbidding/biddingpage',
		
				data: {
				page_size: mescroll.size,
				page: mescroll.num,
				keywords:this.keywords
				},
				success: res => {
					let newArr = [];
			
					let msg = res.message;
					if (res.code == 0 && res.data) {
						newArr = res.data.list;
					} else {
						this.$util.showToast({
							title: msg
						});
					}
					mescroll.endSuccess(newArr.length);
					//设置列表数据
					if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(newArr); //追加新数据
				clearTimeout(this.timeOutObj);
				this.getTime();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					mescroll.endErr();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},	
		getTime() {
			let that = this;
			let list = this.list;
			for (let i in list) {
				let item = list[i];
				let curr_time = Math.floor(new Date().getTime() / 1000);
				let end_time = item.bidding_end_time;
				if (curr_time < end_time) {
					let time = end_time - curr_time;
					let day = parseInt(time / (60 * 60 * 24));
					let hou = parseInt((time % (60 * 60 * 24)) / 3600);
					let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
					let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
					let obj = {
						day: day < 10 ? '0' + day : day,
						hou: hou < 10 ? '0' + hou : hou,
						min: min < 10 ? '0' + min : min,
						sec: sec < 10 ? '0' + sec : sec
					};
					let timeShow = '';

					timeShow += obj.day + '天';

					timeShow += obj.hou + ':' + obj.min + ':' + obj.sec;
					item.timeShow = timeShow;
				}
			}
			this.list = list;
			this.num++;
			that.timeOutObj = setTimeout(function() {
				that.getTime();
			}, 1000);
		},

		search() {
			this.keywords = this.search_text;
			this.$refs.mescroll.refresh();
		},

		biddingDetail(item) {
			if(this.pintuanTraderDetail == null) {
				this.$util.showToast({
					title: '需先成为团长才可以竞标',
				})
				return;
			}
			this.$util.redirectTo('/promotionpages/platformpintuan/bidding_detail/bidding_detail?bidding_id=' + item.bidding_id);
		},
		
		enterDetail(item) {
			this.$util.redirectTo('/promotionpages/platformpintuan/enter_detail/enter_detail?enter_id=' + item.enter_id);
		},
		
	}
};
</script>

<style lang="scss">
.article-tops {
	width: 100%;
	
	background-color: #ffffff;
	//padding: 2rpx 32rpx 28rpx 60rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.fx_adv {
			width: 100vw;
			display: block;
		}
	
}
.article-top {
	width: 100%;

	background-color: #ffffff;
	padding: 2rpx 32rpx 28rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.article-add-brand {
		width: 152rpx;
		height: 72rpx;

		button {
			//width: 152rpx;
			height: 55rpx;
			margin: 0;
			padding: 0;
			border-radius: 36rpx;
			text-align: center;
			line-height: 55rpx;
			background-color: rgba(67, 133, 255, 0.1);
			color: #4385ff;
		}
	}

	.article-search {
		width: 100%;
		height: 72rpx;
		background-color: #f8f8f8;
		//background-color: #000;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		border-radius: 36rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		text {
			color: #cccccc;
			font-size: 30rpx;
			margin-left: 16rpx;
		}

		input {
			flex: 1;
			font-size: 28rpx;
		}

		.placeholder-color {
			color: #cccccc;
		}
	}
}

.wpdepintuan {
	margin: 0 28rpx 0 28rpx;

	.wpdepintuan_hder {
		margin-top: 22rpx;
		height: 250rpx;
		background-color: #ffffff;
		display: flex;
		position: relative;
		border-radius:10rpx;

		.wpdepintuan_bao {
			.wpdepintuan_img {
				display: flex;
				flex-direction: row;
				width: 182rpx;
				height: 182rpx;
				border-radius: 12rpx;
				display: inline-block;
				margin-top: 32rpx;
				margin-left: 30rpx;
			}

			.wpdepintuan_bao_o {
				width: 82rpx;
				height: 40rpx;
				background-color: #ff4544;
				text-align: center;
				color: #ffffff;
				position: absolute;
				top: 34rpx;
				left: 30rpx;
			}
		}

		.wpdepintuan_zi {
			width: 428rpx;
			height: 68rpx;
			line-height: 1;
			display: flex;
			flex-direction: row;
			margin: 34rpx 0 0 22rpx;
		}

		.wpdepintuan_sj {
			font-size: 24rpx;
			position: absolute;
			top: 130rpx;
			left: 234rpx;
			border: 2rpx solid #ff4544;
			color: #ff4544;
			border-radius:4rpx;
			line-height:36rpx;
			text {
				padding-left:10rpx;
				padding-right:10rpx;
			}
		}

		.wodesss_list_qian {
			height: 24rpx;
			color: #ff4544;
			position: absolute;
			top: 180rpx;
			left: 232rpx;
			font-size: 24rpx;

			.price {
				padding-left: 10rpx;
				font-size: 32rpx;
			}
		}

		button {
			//width: 130rpx;
			height: 55rpx;
			border-radius: 30rpx;
			background-color: #ff4544;
			color: #ffffff;
			line-height: 55rpx;
			font-size: 28rpx;
			position: absolute;
			top: 172rpx;
			right: -30rpx;
		}
	}
}
</style>
<style scoped>
/deep/.wpdepintuan uni-button {
	padding: 0 18rpx 0 20rpx !important;
}
</style>
